<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<pre>
			路由实现：
				1.传统开发方式url改变后，立刻发生请求响应整个页面，如果资源过多会导致页面卡顿甚至白屏
				2.SPA单页面应用(通过路由海边锚点值)
				锚点值改变后，不会立刻发送请求，而是在某个合适的实际发起ajax请求页面局部渲染
				优点：不会立刻跳转，用户体验好
			
		</pre>
		<a href="#login">点击登录</a>
		<a href="#home">点击回到主页</a>
		<div id="app">
			
			
		</div>
		<script src="../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*let vm = new Vue({
				el: '#app',
				data(){
					return {
						
					}
				},
				mounted(){
					console.log(location.hash)
				}
			})*/
			let app = document.getElementById("app")
			window.onhashchange = function () {
				let hash = location.hash
				if(hash === '#login'){
					app.innerHTML = '登录页面'
				}else if(hash === '#home'){
					app.innerHTML = '主页页面'
				}
				console.log(location.hash)
			}
		</script>
	</body>
</html>
